<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <!-- 将小写字母转换成大写字母 -->
    <div id="app">
        <!-- 调用spper过滤器    添加自己私有过滤器-->
        <p>{{message | upper | end}}</p>
    </div>
    <div id="app2">

        <p>{{message | upper}}</p>
    </div>
    <script>
        // 全局过滤器 对所有的vue实例都有效
        Vue.filter('upper', function(value) {
                value = value.toUpperCase();
                return value;
            })
            // vue实例
        new Vue({
            el: "#app",
            data: {
                message: "welcome to woniuxy"
            },
            //私有过滤器，只对当前的vue实例有效
            filters: {
                end: function(value) {
                    return value + "SO COOL!"
                }
            }
        });
        new Vue({
            el: "#app2",
            data: {
                message: "welcome to woniuxy"
            }
        });
    </script>
</body>

</html>